/**
* 科技有限公司版权所有（）.
* Copyright (c) 2019, and/or its affiliates. All rights reserved.
* @Date: 2020.09.01 22:47.
* @Author 
* @Description  项目 - 活动详情
**/
<template>
  <div class="pr-detail">
    <h1 class="pr-title"> 活动消息 </h1>
    <ul class="pr-detail-list">
      <li><label>活动名称：</label>{{content.activityName}}</li>
      <li><label>活动状态：</label>{{content.activityStatus == '0' ? '活动暂停' : '已启用'}}</li>
      <li><label>活动链接：</label>{{content.activityUrl}}</li>
    </ul>

    <h1 class="pr-title"> 活动商品 </h1>
    <ul class="pr-detail-list pr-detail-id">
      <template v-for="(item, index) in content.goodsInfoList">
        <li :key="item.id"><label>活动商品ID：</label>{{item.id}}</li>
        <li :key="index"><label>折扣金额：</label>{{item.salevalue || 0}}元</li>
      </template>
    </ul>

    <h1 class="pr-title"> 活动有效期 </h1>
    <ul class="pr-detail-list">
      <li><label>有效期：</label>{{content.activityStarttime}} - {{content.activityEndtime}}</li>
      <li><label>适用日期：</label>{{content.day}}</li>
      <li><label>优惠时间：</label>{{content.starttime}} - {{content.endtime}}</li>
      <li><label>券失效时间：</label>{{content.survivalTime}}</li>
    </ul>

    <h1 class="pr-title"> 活动范围 </h1>
    <ul class="pr-detail-list">
      <li class="pr-phone"><label>手机号归属地：</label>
        <span v-for="(item, index) in content.provinceCityInfoList" :key="index">
          {{item.province}}
          <span v-for="val in item.chooseList" :key="val.cityName">{{val.cityName}}</span>
        </span>
      </li>
      <li><label>每月限购频次：</label>{{content.mothNum}}次</li>
      <li><label>每日限购频次：</label>{{content.dayNum}}次</li>
      <li><label>限制发券数：</label>{{content.limitNum}}/日</li>
    </ul>

    <el-button type="info" class="pr-back-block" @click="handleBackClick">返回</el-button>
  </div>
</template>
<script>
import dayjs from 'dayjs'
import urls from '@/api/urls'
import { getData } from '@/api/'
export default {
  name: 'activityDetail',
  props: {},
  components: {},
  data() {
    return {
      content: {}
    }
  },
  watch: {},
  created() {
    console.log('this.$route.params-----------', this.$route.params.id)
    this.getDetail(this.$route.params.id)
  },
  mounted() { },
  methods: {
    /**
     *@Description
     *@Param
     *@Return 获取商品详情.
     **/
    getDetail(id) {
      const url = urls.activityDetailUrl + `/${id}`
      getData({}, url).then(res => {
        const result = res.result
        const obj = { '1': '一', '2': '二', '3': '三', '4': '四', '5': '五', '6': '六', '7': '七' }

        let str = ''
        result.activityStarttime = result.activityStarttime.slice(0, 10)
        result.activityEndtime = result.activityEndtime.slice(0, 10)
        result.endtime = result.endtime.slice(10, 16)
        result.starttime = result.starttime.slice(10, 16)
        result.survivalDay.split(',').forEach(element => {
          str += '周' + obj[element] + '、'
        });
        result.day = str.slice(0, -1)
        this.content = result
      })
    },
    /**
     *@Description
     *@Param
     *@Return 返回按钮 事件监听.
     **/
    handleBackClick() {
      this.$router.push({ name: 'ActivityList' })
    }
  }
}

</script>
<style lang="scss" scoped="scoped">
.pr-detail {
  .pr-detail-id {
    li {
      width: 50%;
    }
  }
}
.pr-phone {
  padding-left: 90px;
  padding-right: 15px;
  box-sizing: border-box;
  label {
    position: absolute;
    margin-left: -90px;
  }
  > span {
    span {
      display: inline-block;
      padding: 0 5px 5px 5px;
    }
  }
}
</style>
